<template>
  <div class="quick-actions">
    <h3 class="text-lg font-semibold mb-4">快捷操作</h3>
    <div class="grid grid-cols-2 gap-3">
      <el-button 
        v-for="action in actions" 
        :key="action.name"
        :type="action.type" 
        :icon="action.icon"
        @click="handleAction(action)"
        class="flex items-center justify-start"
      >
        {{ action.label }}
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElButton, ElMessage } from 'element-plus'

interface QuickAction {
  name: string
  label: string
  icon: string
  type: 'primary' | 'success' | 'warning' | 'danger' | 'info'
}

const actions: QuickAction[] = [
  {
    name: 'create',
    label: '新建任务',
    icon: 'Plus',
    type: 'primary'
  },
  {
    name: 'upload',
    label: '上传文件',
    icon: 'Upload',
    type: 'success'
  },
  {
    name: 'share',
    label: '分享链接',
    icon: 'Share',
    type: 'warning'
  },
  {
    name: 'export',
    label: '导出数据',
    icon: 'Download',
    type: 'info'
  }
]

const handleAction = (action: QuickAction) => {
  ElMessage.success(`触发操作: ${action.label}`)
  // 实际项目中这里可能调用对应的方法或跳转路由
}
</script>

<style scoped>
.quick-actions {
  @apply border rounded-lg p-4 bg-white;
}

.el-button {
  @apply !justify-start;
}
.el-button + .el-button{margin-left: 0 !important;}
</style>